<template>
  <div class="maincs">
    <div class="main_spac1" style="padding-bottom: 5px">
      <div
        class="main_white padding10 model"
        element-loading-text="加载中"
        v-loading="listLoading"
        style="min-height: 780px"
      >
        <div class="left">
          <div class="model_box">
            <img
              :src="modelPath"
              alt=""
              class="model"
            />
            <img
              src="https://copartner.oss-cn-beijing.aliyuncs.com/logo/2405/22/51MXx5hagc0x5qlDfmeqDuvGht82xPaacfKWGNcC.png"
              alt=""
              class="close"
            />
          </div>
        </div>
        <div class="right">
          <el-col class="flex-middle">
            <span class="right_desc">启用首页弹窗：</span>
            <el-switch
              v-model="switchValue"
              :width="50"
              :active-value="1"
              :inactive-value="2"
              active-color="#19b098"
            ></el-switch>
            <el-tooltip
              class="tooltip marginLeft5"
              effect="dark"
              placement="top"
            >
              <div slot="content">启用弹窗后，每日首次进入商城时展示弹窗</div>
              <svg aria-hidden="true" class="navbar_svg" width="14" height="14">
                <use xlink:href="#icon-summary_question" />
              </svg>
            </el-tooltip>
          </el-col>
          <el-col class="flex-middle">
            <span class="right_desc">展示规则：</span>
            <el-radio-group v-model="type">
              <el-radio :label="1">每日首次展示</el-radio>
              <el-radio :label="2">每次进入展示</el-radio>
            </el-radio-group>
          </el-col>
          <el-col class="flex-middle">
            <span class="right_desc">生效时间：</span>
            <el-date-picker
              v-model="effectiveTime"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
            <el-tooltip
              class="tooltip marginLeft5"
              effect="dark"
              placement="top"
            >
              <div slot="content">启用弹窗后，仅在生效时间内弹窗</div>
              <svg aria-hidden="true" class="navbar_svg" width="14" height="14">
                <use xlink:href="#icon-summary_question" />
              </svg>
            </el-tooltip>
          </el-col>
          <el-col class="flex-middle">
            <span class="right_desc">跳转内容：</span>
            <el-select
              v-model="redirect_content"
              placeholder="请选择"
            >
              <el-option
                v-for="item in jumpOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col>
            <p class="right_desc">
              弹框内容：
              <span style="color: #999">
                推荐650*800以上的等比图片，支持JPG、PNG和JPEG
              </span>
            </p>
            <el-upload
              class="avatar-uploader"
              :action="uploadPath"
              :show-file-list="false"
              :on-success="handSuccess"
              :before-upload="beforeUpload"
              :disabled="Boolean(imagePath)"
            >
              <div class="avatar" v-if="imagePath">
                <img :src="imagePath"/>
                <div class="avatar-close">
                  <i class="el-icon-close" @click.stop="handleRemove"></i>
                </div>
              </div>
              <div class="upload" v-else>
                <div class="upload_box">
                  <i class="el-icon-plus avatar-uploader-icon"></i>
                  <p>上传</p>
                </div>
              </div>
            </el-upload>
          </el-col>
          <el-col>
            <div class="flex-center">
              <el-button 
                class="submit" 
                type="primary" 
                @click="submit"
                v-repeatClick>
                  保存
                </el-button>
            </div>
          </el-col>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { uploadPath } from "@/api/currency";
import { partnerSetPopup, partnerSetSavePopup } from "@/api/shop/shop.js";
import { packApi } from "@/utils/public";
export default {
  data() {
    return {
      uploadPath,
      listLoading: false, // 加载loading
      imagePath: "", // 显示图片
      redirect_content: "", // 跳转内容
      switchValue: 1, // 弹框开关
      effectiveTime: [], // 生效时间
      type: 1, // 展示规则
      jumpOptions: [
        // {
        //   value: 1,
        //   label: "推荐商品",
        // },
        {
          value: 2,
          label: "领劵中心",
        },
        {
          value: 3,
          label: "积分商城",
        },
        {
          value: 4,
          label: "仅展示",
        },
      ], // 跳转内容选择
    };
  },
  created() {
    this.getData();
  },
  computed: {
    // 弹框图片
    modelPath() {
      return this.imagePath ? this.imagePath : "https://copartner.oss-cn-beijing.aliyuncs.com/logo/2405/22/Thoc0c39JCJRCe1JoextNGlg8KlGHIBFvcwKbv9C.png";
    }
  },
  methods: {
    // 获取数据
    getData() {
      partnerSetPopup(packApi()).then(res=> {
        if(res.data.info && Object.keys(res.data.info).length) {
          let { is_enabled, image_path, redirect_content, type, start_time, end_time } = res.data.info;
          this.switchValue = is_enabled;
          this.imagePath = image_path;
          this.redirect_content = redirect_content;
          this.type = type;
          this.effectiveTime = [start_time,end_time];
        }
      })
    },
    // 上传图片-成功
    handSuccess(res, file, fileList) {
      this.imagePath = res.data.src;
    },
    // 上传图片前
    beforeUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }
      return isLt2M;
    },
    // 删除图片
    handleRemove() {
      this.imagePath = "";
    },
    // 保存
    submit() {
      if(!this.effectiveTime) return this.$message.error("请选择生效时间段");
      if(!this.effectiveTime.length) return this.$message.error("请选择生效时间段");
      if(!this.redirect_content) return this.$message.error("请选择跳转内容页面");
      const currentDate = new Date(); // 当前时间
      const startDate = new Date(this.effectiveTime[0]); // 开始生效时间
      if(this.switchValue == 1 && startDate < currentDate) {
        this.$message.error("生效时间不能小于当前时间");
        return;
      }
      let data = packApi({
        is_enabled: this.switchValue,
        image_path: this.imagePath,
        redirect_content: this.redirect_content,
        type: this.type,
        start_time: this.effectiveTime[0],
        end_time: this.effectiveTime[1],
      });
      partnerSetSavePopup(data).then(res=> {
        if(res.errcode == 0) {
          this.$message.success("保存成功");
        }else {
          this.$message.error(res.errmsg);
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.model {
  display: flex;
  .left {
    width: 375px;
    height: 820px;
    flex-shrink: 0;
    background: url("https://copartner.oss-cn-beijing.aliyuncs.com/logo/2405/22/T5W9hhWN1Ii9rXBvfsm2dLacPPDRjQVYuYlaPdVc.png")
      top left no-repeat;
    background-size: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .model_box {
      width: 297px;
      text-align: center;
      .model {
        width: 297px;
        height: 366px;
      }
      .close {
        margin-top: 10px;
      }
    }
  }
  .right {
    width: 500px;
    margin-left: 40px;
    &_desc {
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 14px;
      color: #333333;
    }
    .tooltip {
      fill: #333333;
    }
    .avatar-uploader {
      margin-top: 15px;
      .upload {
        width: 90px;
        height: 90px;
        border: 1px solid #E0E0E0;
        padding: 2px;
        box-sizing: border-box;
        &_box {
          width: 100%;
          height: 100%;
          background: #F6F8F9;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
        &:hover{
          border: 1px dashed #03a98e;
        }
      }
      .avatar {
        width: 92px;
        height: 92px;
        border: 1px solid #E0E0E0;
        box-sizing: border-box;
        position: relative;
        box-sizing: border-box;
        &:hover .avatar-close{
          opacity: 1;
        }
        img {
          width: 90px;
          height: 90px;
        }
        .avatar-close {
          position: absolute;
          top: 0;
          left: 0;
          width: 90px;
          height: 90px;
          background-color: rgba(0, 0, 0, .3);
          opacity: 0;
          i {
            position: absolute;
            right: -8px;
            top: -8px;
            width: 16px;
            height: 16px;
            line-height: 16px;
            color: #fff;
            background-color: #b1b1b1;
            border-radius: 50%;
            font-size: 8px;
          }
        }
      }
    }
  }
}
.el-col {
  margin-top: 15px;
}
.submit {
  all: unset;
  width: 150px;
  padding: 10px 15px;
  border-radius: 4px;
  background: #19b098;
  color: #fff;
  margin-top: 40px;
  box-sizing: border-box;
  text-align: center;
  cursor: pointer;
  &:hover {
    background: rgba(25, 176, 152, .7);
  }
}
</style>
